<template>
    <div class="flex gap-4 mb-4">
      <span><b>球员搜索: </b></span>
      <el-input
        v-model="input2"
        style="width: 240px"
        placeholder="输入球员姓名"
        :prefix-icon="Search"
        @input="$emit('output',input2)"
      /> 
      <div class="spacer"></div>
      
    </div>
  
  
  
  <el-button type="primary"  @click="dialogFormVisible = true">
    添加球员
  </el-button>
  
   <el-dialog v-model="dialogFormVisible" title="添加球员" width="500">
    <el-form :model="form" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="球队ID">
            <el-input v-model="form.teamID" autocomplete="off"  @input = "checkForm" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="球员姓名">
            <el-input v-model="form.personName" autocomplete="off" @input = "checkForm" />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="球员号码">
            <el-input v-model="form.personNum" autocomplete="off" @input = "checkForm" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="球员比赛">
            <el-input v-model="form.personRole" autocomplete="off" @input = "checkForm" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item>
            <el-button  @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="submitForm">添加</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    </el-dialog>

    
  
  
  </template>
  
  <script lang="ts" setup>
  import axios from 'axios'
  
  import { ref } from 'vue'
  
  import { Calendar, Search } from '@element-plus/icons-vue'
  const input1 = ref('')
  const input2 = ref('')
  const input3 = ref('')
  const input4 = ref('')
  const deleteSelected = ref(false)
  import { reactive} from 'vue'
  const flag = ref(true);
  const dialogTableVisible = ref(false)
  const dialogFormVisible = ref(false)
  const formLabelWidth = '140px'
  
  const form = reactive({
    teamID: '',
    personName: '',
    personNum: '',
    personRole: '',
  })
  
  function checkForm(){
    if(form.teamID && form.personName && form.personNum && form.personRole){
        flag.value = false;
    }else{
      flag.value = true;
    }
  }
  
  import {  } from 'vue'
  
  
  const value1 = ref('')
  const value2 = ref('')
  
  const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
  ]
  
  const disabledDate = (time: Date) => {
    return time.getTime() > Date.now()
  }
  
    function submitForm(){
      const userData = {
        teamID: form.teamID,
        personName: form.personName,
        personNum: form.personNum,
        personRole: form.personRole,
              }
              console.log(userData.data);
              axios.post('http://localhost:9001/Team/addTeamPerson',userData).then(response =>{
                  if(response.data){
                      alert("添加成功")
                      this.$router.push('/')
                  }else{
                      alert("添加失败，账号已存在")
                  }})
                  dialogFormVisible.value = false;
    }
  
  </script>
  
  
  <style scoped>
  
  
  .spacer {
    margin: 16px 0; /* 控制空行的高度，16px 可以根据需要调整 */
  }
  
  .demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
  }
  
  .demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
  }
  
  .demo-date-picker .block:last-child {
  border-right: none;
  }
  
  .demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
  }
  </style>
  